<template>
  <Menubar :model="items">
    <template #start>
      <img :src="user.pic" :style="{verticalAlign:'bottom'}" alt="logo" class="p-mr-2" height="40">
    </template>
  </Menubar>
  <Dialog :style="{width: '50vw'}" :visible="dialog.showUser" header="修改用户信息">
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-user"></i>
        </span>
        <span class="p-float-label">
          <InputText id="account" v-model="user.name"/>
          <label for="account">账号</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-user"></i>
        </span>
        <span class="p-float-label">
          <InputText id="nickname" v-model="user.aliasName"/>
          <label for="nickname">昵称</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-lock"></i>
        </span>
        <span class="p-float-label">
          <Password id="password" v-model="user.password" toggleMask>
            <template #footer>
              <Divider/>
              <p class="p-mt-2">建议</p>
              <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
                <li>最少一个大写字母</li>
                <li>最少一个小写字母</li>
                <li>最少一个数字</li>
                <li>最少8位</li>
              </ul>
            </template>
          </Password>
          <label for="password">密码</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-mobile"></i>
        </span>
        <span class="p-float-label">
          <InputMask id="phone" v-model="user.phoneNumber" mask="999-9999-9999"/>
          <label for="phone">电话</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-globe"></i>
        </span>
        <span class="p-float-label">
          <InputText id="email" v-model="user.emailAddress"/>
          <label for="email">邮箱</label>
        </span>
      </div>
    </div>

    <template #footer>
      <Button class="p-button-text" icon="pi pi-times" label="取消" @click="$store.commit('setDialog',{showUser:false})"/>
      <Button autofocus icon="pi pi-check" label="确认" @click="toUpdateUser"/>
    </template>
  </Dialog>
</template>
<script>
import service from '@/request.js'
import store from '@/store'
import {computed} from 'vue'
import {useRoute} from 'vue-router'

const Item = [
  {
    label: '报表',
    icon: 'pi pi-fw pi-calendar',
    to: '/charts'
  },
  {
    label: '审核管理',
    icon: 'pi pi-fw pi-calendar',
    to: '/car'
  },
  {
    label: '用户设置',
    icon: 'pi pi-fw pi-user',
    command() {
      store.commit('setDialog', {showUser: true})
    }
  },
  {
    label: '退出',
    icon: 'pi pi-fw pi-power-off',
    command() {
      store.dispatch('logout')
    }
  }]
const route = useRoute()

export default {
  props: {items: Object},
  setup(p, c) {

    let {items} = p
    items.push(...Item)
    let dialog = computed(() => store.state.dialog)

    let user = store.getters.getUser

    function toUpdateUser() {
      service.post(`/user/update/id/${user.id}`, user)
          .then(r => {
            store.commit('setDialog', {showUser: false})
          })
    }

    return {items, dialog, toUpdateUser, user}
  }
}
</script>
<style lang="stylus" scoped>
.p-menubar
  top 0
  position sticky
  z-index 100

.row
  margin-top 30px
</style>
